<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
	<title>环保监控一体化平台</title>
	<link rel="stylesheet" href="assets/layui/css/layui.css">
	<link rel="stylesheet" href="assets/css/common.css">
	<link rel="stylesheet" href="assets/css/index.css">
	<link rel="stylesheet" href="assets/css/aqi.css">
	<style>
		.svg{
			position: absolute;
			width: 100%;
			height: 77px;
			left: 0;
			top:0;
			z-index: 99;
		}
	</style>
</head>
<body>
	<div class="main-page page-home">
		<!-- 3d模型展示区域  begin -->
		<div class="page-3d"></div>
		<!-- 3d模型展示区域  end -->
		<div class="left-slider-box"></div>
		<!-- 皮带检测仪弹窗 begin -->
		<div class="pop-up tilt-in-bl">
			<div class="open"><span class="close-pop pointer"><img class="open-img" src="assets/img/open.png"></span></div>
			<div class="item-box">
				<div class="wifi-box">
					<img class="wifi-img" src="assets/img/wifi.png">
					<span class="wifi-page">皮带检测仪</span>
				</div>
				<div class="item-content">
					<ul class="item-ul">
						<li class="item-li">
							<img class="dian-img" src="assets/img/dian.png">
							<span class="item-span">PM10</span>
							<span>0.133mg/m</span>
						</li>
						<li class="item-li">
							<img class="dian-img" src="assets/img/dian.png">
							<span class="item-span">PM10</span>
							<span>0.133mg/m</span>
						</li>
						<li class="item-li ">
							<img class="dian-img" src="assets/img/dian.png">
							<span class="item-span ">温度</span>
							<span class="item-du">26℃</span>
						</li>
						<li class="item-li">
							<img class="dian-img" src="assets/img/dian.png">
							<span class="item-span">湿度</span>
							<span class="item-du">60%</span>
						</li>
						<li class="item-li">
							<img class="dian-img" src="assets/img/dian.png">
							<span class="item-span ">风速</span>
							<span class="item-du">0.56m/s</span>
						</li>
					</ul>
					<div class="itme-img">
						<img src="assets/img/page.png" >
					</div>
				</div>
			</div>
		</div>
		<!-- 皮带检测仪弹窗 end -->

		<!-- 检测仪/voc浮层 begin-->
		<ul class="params-options">
			<li><i class="i-monitor"></i><span>监测</span></li>
			<li><i class="i-voc"></i><span>voc</span></li>
		</ul>
		<!-- 检测仪/voc浮层 end-->

		<!-- 设备在线情况浮层 begin-->
		<ul class="footer-ul-data flex">
			<li><span class="label">检测仪</span><span class="inline">62</span>/68</li>
			<li><span class="label">VOCS</span><span class="inline">14</span>/4</li>
			<li><span class="label">无组织</span><span class="inline">4</span>/4</li>
			<li><span class="label">治理设备</span><span class="inline">82</span>/83</li>
		</ul>
		<!-- 设备在线情况浮层 end-->

		<span class="icon-show-aqi"></span>
		<!-- aqi区域 begin -->
		<div class="side-right slide-in-right">
			<div class="silder-right-body">
				<span class="icon-hide-aqi"></span>
				<ul class="tab-title flex">
					<li class="flex on vertical">
						<span class="icon-control"></span>
						<i>省控点数据</i>
					</li>
					<li class="flex vertical">
						<span class="icon-aqi"></span>
						<i>场内空气治理</i>
					</li>
					<li class="flex vertical">
						<span class="icon-road"></span>
						<i>厂界/道路数据</i>
					</li>
					<li class="flex vertical">
						<span class="icon-voc"></span>
						<i>VOC数据</i>
					</li>
				</ul>
				<div class="tab-item-section">
					<ul class="content-box">
						<li class="item" id="controlPoint">
							<div class="silder-title">
								<span class="on">县政府</span>
								<span>小型空气站</span>
								<span>环保局</span>
							</div>
							<div class="type-container mgt-10">
								<ul class="type-ul">
									<li>
										<dl class="detail">
											<dd class="cell">
												<p class="label">PM2.5 <span class="danger"><span>↑</span><span>1.24%</span></span></p>
												<p class="value">0.065</p>
											</dd>
											<dd class="cell pdl-20">
												<p class="label">SO2.5 <span class="good"><span>↑</span><span>2.74%</span></span></p>
												<p class="value">0.065</p>
											</dd>
											<dd class="cell pdl-30">
												<p class="label">O3</p>
												<p class="value">0.065</p>
											</dd>
											<dd class="cell">
												<p class="label">PM2.5 <span class="good"><span>↑</span><span>1.24%</span></span></p>
												<p class="value">0.065</p>
											</dd>
											<dd class="cell pdl-20">
												<p class="label">O3</p>
												<p class="value">0.065</p>
											</dd>
											<dd class="cell pdl-30">
												<p class="label">PM2.5 <span class="good"><span>↑</span><span>1.24%</span></span></p>
												<p class="value">0.065</p>
											</dd>
										</dl>
									</li>
									<li>
										<dl class="detail">
											<dd class="cell">
												<p class="label">PM2.5 <span class="danger"><span>↑</span><span>1.24%</span></span></p>
												<p class="value">2.021</p>
											</dd>
											<dd class="cell pdl-20">
												<p class="label">SO2.5 <span class="good"><span>↑</span><span>2.74%</span></span></p>
												<p class="value">2.021</p>
											</dd>
											<dd class="cell pdl-30">
												<p class="label">O3</p>
												<p class="value">2.021</p>
											</dd>
											<dd class="cell">
												<p class="label">PM2.5 <span class="good"><span>↑</span><span>1.24%</span></span></p>
												<p class="value">2.021</p>
											</dd>
											<dd class="cell pdl-20">
												<p class="label">O3</p>
												<p class="value">2.021</p>
											</dd>
											<dd class="cell pdl-30">
												<p class="label">PM2.5 <span class="good"><span>↑</span><span>1.24%</span></span></p>
												<p class="value">2.021</p>
											</dd>
										</dl>
									</li>
									<li>
										<dl class="detail">
											<dd class="cell">
												<p class="label">PM2.5 <span class="danger"><span>↑</span><span>1.24%</span></span></p>
												<p class="value">2.021</p>
											</dd>
											<dd class="cell pdl-20">
												<p class="label">SO2.5 <span class="good"><span>↑</span><span>2.74%</span></span></p>
												<p class="value">1.265</p>
											</dd>
											<dd class="cell pdl-30">
												<p class="label">O3</p>
												<p class="value">1.265</p>
											</dd>
											<dd class="cell">
												<p class="label">PM2.5 <span class="good"><span>↑</span><span>1.24%</span></span></p>
												<p class="value">1.265</p>
											</dd>
											<dd class="cell pdl-20">
												<p class="label">O3</p>
												<p class="value">1.265</p>
											</dd>
											<dd class="cell pdl-30">
												<p class="label">PM2.5 <span class="good"><span>↑</span><span>1.24%</span></span></p>
												<p class="value">1.265</p>
											</dd>
										</dl>
									</li>
								</ul>
								<div class="history-data-title">
									<span class="grow">历史数据</span>
									<span class="filter-data"><div class="date-button"><span id="dateBtn">2021-03-03</span><span class="mgl-4">▼</span></div><span class="select-ui aqi-select">aqi</span></span>
								</div>
								<div class="history-data" id="historyData">
									
								</div>
							</div>
						</li>
						<li class="item icon-aqi">
							<div class="aqi-data-title">
								<span class="grow">颗粒物</span>
								<div class="flex">
									<span class="region">焦煤棚</span>
									<span class="moniter">焦煤棚</span>
								</div>
							</div>
							<div class="aqi-chart" id="aqiChart"></div>
						</li>
						<li class="item icon-road">
							<div class="road-data-title">
								<span class="grow">颗粒物</span>
								<div class="flex">
									<span class="road-select">焦煤棚</span>
								</div>
							</div>
							<div class="road-chart" id="roadChart"></div>
						</li>
						<li class="item icon-voc" id="vocChart"></li>
					</ul>
					
				</div>
			</div>
		</div>
		<!-- aqi区域 end-->

		<!-- 产品logo begin -->
		<span class="product-logo"></span>
		<!-- 产品logo end -->

		<!-- 3d模式 begin -->
		<span class="model-3d"></span>
		<!-- 3d模式 end -->


	<!-- 	<svg version="1.1" class="svg" xmlns="http://www.w3.org/2000/svg">
			<path d="m0 36 710 8 28 27 446 0 26 -28 710 0" stroke="orange" fill="transparent" stroke-width="3"></path>	
		</svg> -->

	</div>

	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
	<script src="assets/js/jquery.SuperSlide.2.1.3.js"></script>
	<script src="assets/layui/layui.js"></script>
	<script src="assets/js/page.js"></script>
	<script src="assets/js/autoSilder.js"></script>
	<script src="assets/js/echarts.min.js"></script>
	<script src="assets/js/select.js"></script>
	<script src="assets/js/aqi.js"></script>
	<script>

		window.onload = function(){
			$(".side-right").autoSilder({
				navCell:"ul.tab-title",
				mainCell:".tab-item-section ul.content-box",
				autoPlay:true,
				pageChange:function(i){
					if(i==2){
				 		roadChart.setValue({
				 			value:[
				 				{name:"颗粒物",unit:"(mg/m³)",value:Math.floor(Math.random()*100)},
						 		{name:"PM2.5",unit:"(mg/m³)",value:Math.floor(Math.random()*50)},
						 		{name:"PM10",unit:"(mg/m³)",value:0.085},
						 		{name:"温度",unit:"°C",value:28.5},
						 		{name:"湿度",unit:"%",value:40},
						 		{name:"大气压",unit:"kpa",value:45.98}
				 			]
				 		})
					}else if(i==3){
						vocChart.setValue({
				 			value:[
				 				{name:"TOVC",unit:"(mg/m³)",value:Math.floor(Math.random()*50)},
						 		{name:"NH3",unit:"(mg/m³)",value:Math.floor(Math.random()*25)},
						 		{name:"H2S",unit:"(mg/m³)",value:Math.floor(Math.random()*10)},
						 		{name:"温度",unit:"°C",value:Math.floor(Math.random()*20)},
						 		{name:"湿度",unit:"%",value:40}
				 			]
				 		})
					}
			 	}
			})


			$("#controlPoint").autoSilder({
				navCell:"div.silder-title",
				mainCell:"ul.type-ul",
				autoPlay:false,
				pageChange:function(i){
			 		console.log(i)
			 	}
			})

			// 渲染左侧菜单树
			new LeftSiderMenu({
			    el:".left-slider-box",
			    size:10,
			    curMenu:"首页",
			    menus:[
			        {href:"首页.html",text:"首页"},
			        {href:"有组织实时数据.html",text:"实时监测"},
			        {href:"数据分析.html",text:"数据分析"},
			        {href:"告警分析.html",text:"告警分析"},
			        {href:"运行状态.html",text:"运行状态"},
			        {href:"煤棚.html",text:"煤棚"}
			    ]
			});
		
			// 实例化底部
			new Footer({
		        el:".main-page",
		        curMenu:"有组织",
		        size:4,
		        menus:[
		            { href:"有组织.html",text:"有组织" },
		            { href:"",text:"无组织" },
		            { href:"车辆出入.html",text:"清洁运输" },
		            { href:"视频.html",text:"视频大厅" }
		        ]
		    });


		    $("body").on("click",".page-3d",function(e){
		    	$(".pop-up").toggle();
		    });

		    $("body").on("click",".close-pop",function(e){
		    	$(".pop-up").toggle();
		    });

		    // 显示/隐藏AQI
		    $("body").on("click",".icon-hide-aqi",function(e){
		    	$(".side-right").toggleClass("slide-in-right");
		    	$(".icon-show-aqi").toggleClass("show-aqi");
		    });


		     $("body").on("click",".icon-show-aqi",function(e){
		    	$(".side-right").toggleClass("slide-in-right");
		    	$(this).toggleClass("show-aqi");
		    });
	        var historyChart = echarts.init(document.getElementById('historyData'));

	        historyChart.setOption({
			    grid: {
			        left: 0,
			        right: '5%',
			        top: '10%',
			        bottom: '20%',
			        containLabel: true,
			    },
			    tooltip: {
			        show: true,
			        trigger: 'item',
			    },
			    legend: {
			        show: true,
			        x: 'right',
			        y: '10',
			        icon: 'stack',
			        itemWidth: 10,
			        itemHeight: 10,
			        textStyle: {
			            color: '#ffffff',
			        },
			        data: ['县政府', '环保局', '小型空气站', '产内'],
			    },
			    xAxis: [
			        {
			            type: 'category',
			            boundaryGap: false,
			            axisLabel: {
			                color: '#617299',
			            },
			            axisLine: {
			                show: true,
			                lineStyle: {
			                    color: '#397cbc',
			                },
			            },
			            axisTick: {
			                show: false,
			            },
			            splitLine: {
			                show: false,
			                lineStyle: {
			                    color: '#195384',
			                },
			            },
			            data: ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11','12','13','14','15','16','17','18','19','20','21','22','23'],
			        },
			    ],
			    yAxis: [
			        {
			            type: 'value',
			            axisLabel: {
			                formatter: '{value}',
			                textStyle: {
			                    color: '#617299',
			                },
			            },
			            axisLine: {
			                lineStyle: {
			                    color: '#27b4c2',
			                },
			            },
			            axisTick: {
			                show: false,
			            },
			            splitLine: {
			                show: true,
			                lineStyle: {
			                    color: '#11366e',
			                },
			            },
			        },
			    ],
			    series: [
			        {
			            name: '县政府',
			            type: 'line',
			            symbol: 'circle',
			            symbolSize: 6,
			            itemStyle: {
			                normal: {
			                    color: '#3B6ED9',
			                    lineStyle: {
			                        color: '#3B6ED9',
			                        width: 1,
			                    }
			                },
			            },
			            data: [110, 12, 101, 14, 90, 30, 10, 82, 91, 34, 90, 30,20, 32, 11, 34, 90, 30, 20, 82, 91, 24, 90, 30],
			        },
			        {
			            name: '环保局',
			            type: 'line',
			            symbol: 'circle',
			            symbolSize: 6,
			            itemStyle: {
			                normal: {
			                    color: '#767B98',
			                    lineStyle: {
			                        color: '#767B98',
			                        width: 1,
			                    },
			                },
			            },
			            data: [20, 12, 11, 24, 90, 30, 10, 21, 54, 90, 30, 10,20, 82, 11, 23, 20, 30, 30, 20, 54, 10, 30, 10],
			        },
			        {
			            name: '小型空气站',
			            type: 'line',
			            symbol: 'circle',
			            symbolSize: 6,
			            itemStyle: {
			                normal: {
			                    color: '#24B6D3',
			                    lineStyle: {
			                        color: '#24B6D3',
			                        width: 1,
			                    },
			                },
			            },
			            data: [26, 42, 11, 24, 90, 30, 10, 21, 54, 90, 30, 10,20, 122, 61, 23, 20, 70, 80, 50, 44, 60, 90, 70],
			        },
			        {
			            name: '产内',
			            type: 'line',
			            symbol: 'circle',
			            symbolSize: 6,
			            itemStyle: {
			                normal: {
			                    color: '#AC8C31',
			                    lineStyle: {
			                        color: '#AC8C31',
			                        width: 1,
			                    },
			                },
			            },
			            data: [26, 42, 11, 24, 90, 30, 10, 21, 54, 90, 30, 10,20, 122, 61, 23, 20, 70, 80, 50, 44, 60, 90, 70],
			        }
			    ]
	        });

			var aqiChart = echarts.init(document.getElementById('aqiChart'));

			aqiChart.setOption({
			    tooltip: {
			        trigger: 'axis',
			        axisPointer: {
			            lineStyle: {
			                color: {
			                    type: 'linear',
			                    x: 0,
			                    y: 0,
			                    x2: 0,
			                    y2: 1,
			                    colorStops: [{
			                        offset: 0,
			                        color: 'rgba(0, 255, 233,0)'
			                    }, {
			                        offset: 0.5,
			                        color: 'rgba(255, 255, 255,1)',
			                    }, {
			                        offset: 1,
			                        color: 'rgba(0, 255, 233,0)'
			                    }],
			                    global: false
			                }
			            },
			        },
			    },
			    grid: {
			        top: '8%',
			        left: '10%',
			        right: '6%',
			        bottom: '10%',
			        // containLabel: true
			    },
			    xAxis: [{
			        type: 'category',
			        axisLine: {
			            show: false,
			            color:'#118CB8'
			        },
			    
			        axisLabel: {
			            color: '#6B9FFC',
			            width:100
			        },
			        splitLine: {
			            show: false
			        },
			        boundaryGap: false,
			        data: ["00","01","02","03","04","05","06","07","08","09","10","11","12"]

			    }],

			    yAxis: [{
			        type: 'value',
			        min: 0,
			        splitLine: {
			            show: true,
			            lineStyle: {
			                color: '#00BFF3',
			                opacity:0.23
			            }
			        },
			        axisLine: {
			            show: false,
			        },
			        axisLabel: {
			            show: true,
			            margin: 20,
			            textStyle: {
			                color: '#6B9FFC',

			            },
			        },
			        axisTick: {
			            show: false,
			        },
			    }],
			    series: [
			        {
			            name:'焦煤棚',
			            type: 'line',
			            lineStyle: {
			                normal: {
			                    color: "#118CB8",
			                },
			            },
			            label: {
			                show: true,
			                position: 'top',
			                textStyle: {
			                    color: '#118CB8',
			                }
			            },
			            itemStyle: {
			                color: "#fff",
			                borderColor: "#118CB8",
			                borderWidth: 2,
			            },
			            areaStyle: {
			                normal: {
			                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
			                        {
			                            offset: 0,
			                            color: 'rgba(17,140,184,0.7)'
			                        },
			                        {
			                            offset: 1,
			                            color: 'rgba(17,140,184,0.1)'
			                        }
			                    ], false),
			                }
			            },
			            data: [0.24,0.47,0.05,0.4,0.33,0.55,0.38,0.84,0.87,1.25,1.54,1.63,2.65,0.226]
			        }
			    ]
			})

			var aqi = new SelectPlus({
				el:".aqi-select",
				data:[
					{ value:"",text:"请选择" },
					{ value:1,text:"1#检测仪" },
					{ value:2,text:"2#检测仪" }
				],
				done:function(row){
					console.log(row);
				}
			})


			setTimeout(()=>{
				aqi.reload([
					{ value:"",text:"请选择" },
					{ value:1,text:"1#检测仪" },
					{ value:2,text:"2#检测仪" },
					{ value:3,text:"3#检测仪" },
					{ value:3,text:"3#检测仪" },
					{ value:3,text:"4#检测仪" },
					{ value:3,text:"5#检测仪" }
				])
			},3000)








			// 自定义下拉框option点击事件
			new SelectPlus({
				el:".aqi-data-title .region",
				data:[
					{ value:"",text:"请选择" },
					{ value:1,text:"1#焦煤棚" },
					{ value:2,text:"2#焦煤棚" },
					{ value:3,text:"3#焦煤棚" }
				],
				done:function(row){
					console.log(row);
				}
			})

			new SelectPlus({
				el:".aqi-data-title .moniter",
				data:[
					{ value:"",text:"请选择" },
					{ value:1,text:"1#检测仪" },
					{ value:2,text:"2#检测仪" },
					{ value:3,text:"3#检测仪" }
				],
				done:function(row){
					console.log(row);
				}
			})

			new SelectPlus({
				el:".road-select",
				data:[
					{ value:"",text:"请选择" },
					{ value:1,text:"1#检测仪" },
					{ value:2,text:"2#检测仪" },
					{ value:3,text:"3#检测仪" }
				],
				done:function(row){
					console.log(row);
				}
			})

			var roadChart = new Aqi({
				el:"#roadChart",
			 	maxValue:[100,50,1,80,100,100],
			 	barWidth:6,
			 	showTitle:true,
			 	color:['linear-gradient(270deg, #2841FF 0%, #51DBFF 100%)','linear-gradient(180deg, #0046B9 0%, #00128C 100%)','linear-gradient(270deg, #67BFD6 0%, #33B136 100%)','linear-gradient(270deg, #2841FF 0%, #51DBFF 100%)','linear-gradient(270deg, #65CE60 0%, #51DBFF 100%)','linear-gradient(270deg, #A379DE 0%, #4B4DAC 100%, #FB8818 100%)'
			 	],
			 	value:[
			 		{name:"颗粒物",unit:"(mg/m³)",value:50},
			 		{name:"PM2.5",unit:"(mg/m³)",value:25},
			 		{name:"PM10",unit:"(mg/m³)",value:0.085},
			 		{name:"温度",unit:"°C",value:28.5},
			 		{name:"湿度",unit:"%",value:40},
			 		{name:"大气压",unit:"kpa",value:45.98}
			 	]
			})


			var vocChart = new Aqi({
				el:"#vocChart",
			 	maxValue:[100,50,10,80,100],
			 	barWidth:10,
			 	orient:"vertical",
			 	color:['linear-gradient(270deg, #2841FF 0%, #2577C8 100%)','linear-gradient(270deg, #11C5FF 0%, #00BC87 100%)','linear-gradient(270deg, #67BFD6 0%, #33B136 100%)','linear-gradient(270deg, #2841FF 0%, #51DBFF 100%)','linear-gradient(270deg, #65CE60 0%, #51DBFF 100%)'
			 	],
			 	value:[
			 		{name:"TOVC",unit:"(mg/m³)",value:50},
			 		{name:"NH3",unit:"(mg/m³)",value:25},
			 		{name:"H2S",unit:"(mg/m³)",value:0.085},
			 		{name:"温度",unit:"°C",value:28.5},
			 		{name:"湿度",unit:"%",value:40}
			 	]
			})

			layui.use(['laypage', 'laydate'], function(){
				let laydate = layui.laydate;

			  	laydate.render({
				    elem: '#dateBtn'
				    ,type: 'date'
				    ,done: function(value, date){
					    $("#dateBtn").val(value)
					}
				});
			})
	    }



	    // <canvas id="canvas" width="600" height="400"></canvas>
	    // var ctx = document.getElementById( 'canvas' ).getContext( '2d' );
     //    var w = canvas.width,
     //            h = canvas.height;

     //    var x = w / 2,y = h / 2;

     //    function setupCanvas(canvas) {
     //        let width = canvas.width,
     //        height = canvas.height,
     //        dpr = window.devicePixelRatio || 1.0;
     //        if (dpr != 1.0 ) {
     //        canvas.style.width = width + "px";
     //        canvas.style.height = height + "px";
     //        canvas.height = height * dpr;
     //        canvas.width = width * dpr;
     //        ctx.scale(dpr, dpr);
     //        }
     //    }
     //    setupCanvas(canvas);
     //    var offset = 100;
     //    function createGradient(ctx,x0,y0,x1,y1){
     //       var grd = ctx.createLinearGradient(x0,y0,x1,y1);
     //       grd.addColorStop(0,'#9a12b3');
     //       grd.addColorStop(1,"#19b5fe");
     //       return grd;
     //    }

     //    function animate(){
     //        ctx.fillStyle = "black";
     //        ctx.fillRect(0,0,canvas.width,canvas.height);
     //        ctx.lineWidth = 3;
     //        ctx.save();
     //        ctx.beginPath();    
     //        ctx.moveTo(100,100);
     //        ctx.lineTo(200,100);
     //        ctx.lineTo(230,200);
     //        ctx.lineTo(250,50);
     //        ctx.lineTo(270,180);
     //        ctx.lineTo(300,60);
     //        ctx.lineTo(330,160);
     //        ctx.lineTo(350,60);
     //        ctx.lineTo(380,100);
     //        ctx.lineTo(480,100);
     //        ctx.strokeStyle = "gray";
     //        ctx.lineJoin = "round";
     //        ctx.stroke(); 

     //        ctx.beginPath();
     //        ctx.rect(offset,0,150,500);
     //        ctx.clip();
     //        ctx.beginPath();
     //        ctx.moveTo(100,100);
     //        ctx.lineTo(200,100);
     //        ctx.lineTo(230,200);
     //        ctx.lineTo(250,50);
     //        ctx.lineTo(270,180);
     //        ctx.lineTo(300,60);
     //        ctx.lineTo(330,160);
     //        ctx.lineTo(350,60);
     //        ctx.lineTo(380,100);
     //        ctx.lineTo(480,100);
     //        ctx.lineWidth = 4;
     //        ctx.strokeStyle = createGradient(ctx,offset,0,offset + 150,0);
     //        ctx.lineCap = "round";
     //        // ctx.globalCompositeOperation = 'lighter';
     //        ctx.lineJoin = "round";
     //        ctx.stroke(); 

     //        ctx.restore();

     //        offset += 2;
     //        if(offset > 600){
     //            offset = 100;
     //        }

     //        requestAnimationFrame(animate);
     //    }

     //    animate();

	</script>
</body>
</html>